<template>
	<n-modal v-if="isProd" v-model:show="show">
		<div
			class="fixed bottom-5 left-[50%] -translate-x-[50%] h-20 rounded border border-border-2 bg-bg-1 px-4 flex items-center">
			<base-icon name="settings" size="25" color="var(--color-text-3)"></base-icon>
			<div class="px-4">A new version of 2UP is available, please refresh to update.</div>
			<base-button type="primary" :block="false" @click="refresh()">Refresh</base-button>
		</div>
	</n-modal>
</template>

<script lang="ts" setup>
import { NModal } from 'naive-ui'
import { BaseButton, BaseIcon } from '@/components/base'
import { useAppStore } from '@/store'
import { ref } from 'vue'
import { getMaintenanceData } from '@/api/assistants'

defineOptions({ name: 'AppUpdate' })

const appStore = useAppStore()

const isProd = import.meta.env.PROD && import.meta.env.MODE === 'prod'

const show = ref(false)

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const checkMaintenance = async () => {
	try {
		const { data } = await getMaintenanceData()
		if (appStore.version !== data.version) {
			appStore.version = data.version
			show.value = true
		}
	} finally {
		setTimeout(() => checkMaintenance(), 60000)
	}
}

const refresh = () => location.reload()

// TODO 临时关闭维护检测,服务端暂无这个服务; 2024.9.17
// checkMaintenance()
</script>
